<script lang="ts">
    import { useClassList } from "../utils/useClassList";
    import { useStyle } from "../utils/useStyle";
    import type { LoadingBarProps } from "./LoadingBar";

    const props: LoadingBarProps = $props();

    const store = $state({
        show: false,
        status: "success",
        percent: 0,
    });

    const classList = $derived(
        useClassList(props, "cm-loading-bar", {
            "cm-loading-bar-show": store.show,
        })
    );

    const innerClass = $derived({
        "cm-loading-bar-inner": true,
        [`cm-loading-bar-status-${store.status}`]: !!store.status,
    });

    export const update = (options: any) => {
        if (options.percent !== undefined) {
            store.percent = options.percent;
        }
        if (options.status !== undefined) {
            store.status = options.status;
        }
        if (options.show !== undefined) {
            store.show = options.show;
        }
    };

    const innerStyle = $derived(
        useStyle(
            {},
            {
                width: store.percent ? `${store.percent}%` : "",
            }
        )
    );
</script>

<div class={classList}>
    <div class={innerClass} style={innerStyle}></div>
</div>
